import { View } from "@tarojs/components";
import ByIcon from "./ByIcon";
import { cva } from "class-variance-authority";
import { ReactNode } from "react";

type ByCellProps = {
  tip?: ReactNode;
  label?: ReactNode;
  labelWidth?: string;
  labelClass?: string;
  align?: "left" | "right";
  size?: "small";

  icon?: string;
  next?: boolean;
  nextIcon?: ReactNode;
  border?: boolean;
  vertical?: boolean;
  requierd?: boolean;

  className?: string;
  children?: ReactNode;
};

type ByCellEvents = {
  onClick?: () => void;
};

const cellContent = cva("flex-auto min-w-0 h-full flex items-center", {
  variants: {
    size: {
      small: "-my-2",
      default: "-my-4",
      none: "",
    },
    align: {
      left: "justify-start",
      right: "justify-end",
      center: "justify-center",
    },
  },
  defaultVariants: {
    size: "default",
  },
});

const cellCls = cva("flex flex-1 border-[#eee]", {
  variants: {
    border: {
      true: "border-t-1",
    },
    size: {
      small: "py-1.5",
      default: "py-3 min-h-[104px]",
    },
    vertical: {
      true: "flex-col",
      false: "items-center",
    },
  },
  defaultVariants: {
    size: "default",
    vertical: false,
  },
});

export default ({
  next,
  nextIcon,

  align,
  size,
  icon,
  tip,
  label,
  labelWidth,
  vertical,
  requierd,
  border,

  className,
  children,

  onClick,
}: ByCellProps & ByCellEvents) => {
  return (
    <View
      className={`${cellCls({ size, border, vertical })} ${className}`}
      onClick={onClick}
    >
      <View
        className={`flex flex-none items-center ${
          vertical ? "w-full mb-2" : ""
        }`}
        style={!vertical ? { width: labelWidth } : {}}
      >
        {icon && <ByIcon name={icon} className="mr-2" size="36" />}
        {label && (
          <View
            className={`flex-none mr-2 text-third text-sm ${
              requierd && "before:content-['*'] before:text-error"
            }`}
          >
            {label}
          </View>
        )}
        {tip && <View className="flex-auto text-third text-xs">{tip}</View>}
      </View>

      <View className={cellContent({ align, size: vertical ? "none" : size })}>
        {children}
      </View>

      {nextIcon
        ? nextIcon
        : next && (
            <ByIcon
              className="ml-1 text-third text"
              name="ArrowRight"
              size={26}
            />
          )}
    </View>
  );
};
